<template>
  <div class="main-content" style="width: 60%;margin-top: 20px">
    <div style="display: flex;grid-gap: 20px;align-items: flex-start;margin-bottom: 40px">
      <div style="flex: 1">
        <strong @click="loadByCategory(null)" :class="{'category-active' :data.categoryName === null}" style="margin-right: 10px;font-size: 18px; display: inline-block;margin-bottom: 5px ;cursor: pointer">全部</strong>
        <strong @click="loadByCategory(item.name)" :class="{'category-active' : item.name === data.categoryName}" style="margin-right: 10px;font-size: 18px; display: inline-block;margin-bottom: 5px ;cursor: pointer"
                v-for="item in data.categoryList" :key="item.id">{{item.name}}</strong>
      </div>
      <div style="flex: 1;display: flex">
        <el-input clearable size="large" v-model="data.name" placeholder="请输入名称查询" style="margin-right: 5px"></el-input>
        <el-button size="large" type="primary" @click="load">查 询</el-button>
      </div>
    </div>

    <div>
      <el-row :gutter="20">
        <el-col @click="goPage('/front/bookDetail?id='+item.id)" :span="6" v-for="item in data.tableData" :key="item.id" style="margin-bottom: 20px">
          <div class="book-box">
            <img :src="item.cover" style="width: 90%">
          </div>
          <div style="margin: 5px 0">{{item.name}}</div>
          <div style="margin: 5px 0;font-size: 12px;color: #666666" class="line1">{{item.author}}</div>
          <div style="margin: 5px 0;font-size: 12px;color: #666666">库存:{{item.store}}</div>
        </el-col>
      </el-row>
    </div>
    <div  style="margin-top: 10px" v-if="data.total">
      <el-pagination  @current-change="load" layout="total,prev,pager,next" background :page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total" />
    </div>
  </div>
</template>

<script setup>

import {reactive} from "vue";
import request from "@/utils/request.js";
import router from "@/router/index.js";

const data=reactive({
  categoryList:[],
  name:router.currentRoute.value.query.name || null,
  tableData:[],
  pageNum:1,
  pageSize:10,
  total:0,
  categoryName:router.currentRoute.value.query.categoryName || null
})

const loadByCategory = (categoryName) => {
  data.categoryName=categoryName
  load()
}

//清空地址栏参数
const clearUrlParam = () => {
  let url = location.href
  url = url.replace(/(\?|#)[^'"]*/, '');           //去除参数
  window.history.pushState({},0, url);
}

request.get('category/selectAll').then(res=>{
  data.categoryList=res.data
})

const goPage = (path) => {
  location.href=path
}
const load = () =>{
  request.get('/book/selectPage',{
    params:{
      pageNum:data.pageNum,
      pageSize:data.pageSize,
      name:data.name,
      categoryName:data.categoryName
    }
  }).then(res=>{
    if(res.code === "200"){
      data.tableData=res.data?.list || []
      data.total=res.data?.total
    }
  })
  clearUrlParam()
}
load()
</script>

<style scoped>
.book-box{
  overflow: hidden;
}

.book-box:hover img{
  cursor: pointer;
  scale: 1.1;
}

.book-box img{
  transition: all 0.2s;
}
.category-active{
  color: #1890ff;
}
</style>